<template>
  <view class="teach-data-center">
    <!-- 顶部用户信息 -->
    <view class="user-header">
      <image class="avatar" :src="userInfo.image" />
      <view class="user-info">
        <view class="user-row">
          <text class="user-name">{{ userInfo.tutorname }}</text>
          <!-- <text class="switch-btn">切换助教</text> -->
        </view>
        <view class="user-row user-desc">
          <text class="user-level">{{ userInfo.tutorGrade }}</text>
        </view>
      </view>
    </view>

    <!-- 考勤情况 -->
    <!-- <view class="section attendance">
      <view class="section-title">合作情况</view>
      <view class="attendance-list">
        <view class="attendance-item" v-for="item in attendanceList" :key="item.label">
          <view class="attendance-value">{{ item.value }}</view>
          <view class="attendance-label">{{ item.label }}</view>
        </view>
      </view>
    </view> -->

    <!-- 上钟情况 -->
    <view class="section work-stat">
      <view style="display: flex;justify-content: space-between;align-items: center;margin-bottom: 20rpx;" >
        <view class="section-title">上课情况</view>
        <view class="date-range" style="color: #000;font-size: 24rpx;width: 400rpx; display: flex;align-items: center;margin-right: -30rpx;">
          <view :class="index === tagActive ? 'tag-active' : 'tag'" v-for="(item, index) in tagList" :key="item.value" @click="tagClick(index)">{{ item.label }}</view>
        </view>
      </view>
      <view class="work-stat-row">
        <view class="work-stat-item">
          <view class="work-stat-value">￥{{ tutorCollectData.amount }}</view>
          <view class="work-stat-label" style="align-items: center;display: flex;" >
            {{ tagList[tagActive].label }}上课金额
          </view>
        </view>
        <view class="work-stat-item">
          <view class="work-stat-value">{{ tutorCollectData.classTime }}</view>
          <view class="work-stat-label">{{ tagList[tagActive].label }}上课时长(小时)</view>
        </view>
      </view>
      <!-- 图表空白占位 -->
      <!-- <view class="chart-placeholder">
      <view style="margin: 0 auto;font-weight: bold;text-align: center;margin-top: -30rpx;font-size: 24rpx;" >年度上课时长报表</view>
        <view class="charts-box">
            <qiun-data-charts 
            type="column"
            :opts="opts"
            :chartData="chartData"
            />
        </view>
      </view> -->

    </view>

    <!-- 每天上钟情况 -->
    <view class="section daily-list">
      <view style="display: flex;justify-content: space-between;align-items: center;margin-bottom: 18rpx;" >
        <view class="section-title">每天上课情况</view>
        <!-- <view style="color: #666;font-size: 24rpx;" >{{ datetimerange[0] }}至{{ datetimerange[1] }}</view> -->
<!-- 
        <uni-datetime-picker v-model="datetimerange" type="daterange" rangeSeparator="至" style="background-color: red;width: 300rpx;"  @change="change" >
          <view class="date-range" style="color: #000;font-size: 24rpx;width: 400rpx; margin-left: auto;display: flex;align-items: center;flex-direction: row-reverse;">
              <image src="@/static/images/down_one.png" style="width: 30rpx;height: 30rpx;" ></image>
              {{ datetimerange[0] }}至{{ datetimerange[1] }}
          </view>
        </uni-datetime-picker> -->
      </view>
      <view class="daily-table">
        <view class="daily-row daily-header">
          <view class="daily-cell">日期</view>
          <view class="daily-cell">时长(小时)</view>
          <view class="daily-cell">金额</view>
        </view>
        <scroll-view  scroll-y="true" class="scroll-Y" @scrolltolower="tolower">
          <view class="daily-row" v-for="item in dailyList" @click="goToTeachDetails(item)" :key="item.date">
            <view class="daily-cell">{{ item.dateTime.substring(0,10) }}</view>
            <view class="daily-cell">{{ item.classTime }}</view>
            <view class="daily-cell">￥{{ item.amount }}</view>
          </view>
        </scroll-view>
      </view>
    </view>
      <view style="text-align: center;font-size: 24rpx;color: #888;margin-top: 20rpx;" >
        6月10号凌晨之前的单子，需要看文档统计
      </view>
  </view>
</template>

<script setup>
import { ref,onMounted } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { getFindTutorById,getTutorCollect,getTutorOrderList } from '@/api/dataCenter/index'
import { toast } from '@/utils/common'

const tagList = ref([
  { label: '当日', value: 'day' },
  { label: '近1周', value: 'week' },
  { label: '近1月', value: 'month' },
  { label: '近1年', value: 'year' }
])

const tagActive = ref(0)

const tagClick = (index) => {
  tagActive.value = index
  getTutorCollectHan((index + 1)+'',userInfo.value.id)
  
  console.log('点击时间',tagActive.value);
  
  const today = new Date()
  const endDate = today.toISOString().split('T')[0]
  let startDate = new Date()
  
  switch(tagList.value[index].value) {
    case 'day':
      startDate.setDate(today.getDate() - 1)
      break
    case 'week':
      startDate.setDate(today.getDate() - 7)
      break
    case 'month':
      startDate.setMonth(today.getMonth() - 1)
      break
    case 'year':
      startDate.setFullYear(today.getFullYear() - 1)
      break
  }
  
  startDate = startDate.toISOString().split('T')[0]
  datetimerange.value = [startDate, endDate]
}

const userInfo = ref({
  image: 'https://img.yzcdn.cn/vant/cat.jpeg',
  tutorname: '',
  tutorGrade: '',
  months: 6
})
const tutorCollectData = ref({})

const attendanceList = ref([
  { label: '出勤天数(天)', value: 32 },
  { label: '旷工天数(天)', value: 32 },
  { label: '请假天数(天)', value: 32 }
])

const workStat = ref({
  monthHours: 2685,
  todayHours: 6
})


const datetimerange = ref(['2025-05-03', '2025-06-02'])



const dailyList = ref([
  // { date: '2025-06-02', time: '24小时24分钟', money: '5647.25' },
  // { date: '2025-06-01', time: '24小时24分钟', money: '5647.25' },
  // { date: '2025-05-31', time: '24小时24分钟', money: '5647.25' },
  // { date: '2025-05-30', time: '24小时24分钟', money: '5647.25' },
  // { date: '2025-05-29', time: '24小时24分钟', money: '5647.25' },
  // { date: '2025-05-28', time: '24小时24分钟', money: '5647.25' },
  // { date: '2025-05-27', time: '24小时24分钟', money: '5647.25' },
  // { date: '2025-06-02', time: '24小时24分钟', money: '5647.25' },
  // { date: '2025-06-01', time: '24小时24分钟', money: '5647.25' },
  // { date: '2025-05-31', time: '24小时24分钟', money: '5647.25' },
  // { date: '2025-05-30', time: '24小时24分钟', money: '5647.25' },
])



//图标区域
const chartData = ref({})

const opts = ref({ 
  color: ["#001C71","#0035D7"],
        padding: [15,15,0,5],
        enableScroll: false,
        legend: {
          show:false
        },
        xAxis: {
          disableGrid: true,
        },
        yAxis: {
          showTitle:true,
          data: [
            {
              min: 0,
              title:'小时'
            }
          ]
        },
        extra: {
          column: {
            type: "group",
            width: 10,
            activeBgColor: "#000000",
            activeBgOpacity: 0.08,
            linearType: "custom",
            seriesGap: 5,
            linearOpacity: 0.5,
            customColor: [
              "#0035D7",
              "#001C71"
            ]
          }
        }

})

 const  getServerData  = () => {
      //模拟从服务器获取数据时的延时
      setTimeout(() => {
        //模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
        let res = {
            categories: ["6月","7月","8月","9月","10月","11月"],
            series: [
              {
                name: "目标值",
                data: [35,36,31,33,13,34,]
              },
            ]
          };
        chartData.value = JSON.parse(JSON.stringify(res));
      }, 500);
    }
  



// const change = (e) => {
// 	getDataList(Number(e.detail.value) + 1 + '')
//   // console.log(datetimerange.value)
// }

const tolower = (e) =>{
	pageNo.value ++
	getTutorOrderListHan(userInfo.value.id,pageNo.value)
	console.log('----',dailyList.value)
	console.log('滚动到底',e)
}

const formatMinutesToTime = (minutes = 0) => {
    const hours = Math.floor(minutes / 60)
    const mins = minutes % 60
    return `${hours}小时${mins}分钟`
}

const goToTeachDetails = (item) =>{
    uni.navigateTo({
      url: '/pages/teachDataCenter/currentTeachData?dateTime='+item.dateTime+'&tutorId='+userInfo.value.id
    })
}


onLoad(async (option)=>{
	if(option.userId){
		const res = await getFindTutorById({
			userId:option.userId
		})
		userInfo.value = res.result
	}else{
		let userId = uni.getStorageSync('userInfo').userId
		const res = await getFindTutorById({userId})
		userInfo.value = res.result
	}
	getTutorCollectHan('1',userInfo.value.id)
	getTutorOrderListHan(userInfo.value.id,pageNo.value,pageSize.value)
	
})

const getTutorCollectHan = async (queryType,tutorId) =>{
	const tutorCollect = await getTutorCollect({
		queryType,
		tutorId
	})
	tutorCollectData.value = tutorCollect.result

}

const pageNo = ref(1)
const pageSize = ref(10)
const getTutorOrderListHan = async (tutorId,pageNo,pageSize = 10) => {
	const res = await getTutorOrderList({
		tutorId,
		pageNo,
		pageSize
	})
  if(res.result.records.length == 0) {
	  toast('到底了~')
  }else{
    dailyList.value = [...dailyList.value,...res.result.records]

  }
} 

onMounted(()=>{
  getServerData()
})

</script>

<style scoped lang="scss" >
.scroll-Y{
	height: 600rpx;
}
.tag {
  font-size: 24rpx;
  color: #000;
  margin-right: 10rpx;
  border: 1rpx solid #000;
  border-radius: 10rpx;
  padding: 4rpx 10rpx;
}
.tag-active {
  color: #fff;
  background-color: #000;
  border: 1rpx solid #000;
  margin-right: 10rpx;
  border-radius: 10rpx;
  padding: 4rpx 10rpx;
}

.charts-box {
width: 100%;
height: 300rpx;
}
.teach-data-center {
  background: linear-gradient(180deg, #dfebff 0%, #ffffff 100%), linear-gradient(268deg, #a4f9ff 0%, #e7e0ff 100%);
  min-height: 100vh;
  padding-bottom: 30rpx;
}
.user-header {
  display: flex;
  align-items: center;
  padding: 40rpx 30rpx 0 30rpx;
}
.avatar {
  width: 90rpx;
  height: 90rpx;
  border-radius: 50%;
  background: #fff;
}
.user-info {
  flex: 1;
  margin-left: 24rpx;
}
.user-row {
  display: flex;
  align-items: center;
  /* justify-content: space-between; */
}
.user-name {
  font-size: 32rpx;
  font-weight: bold;
  color: #222;
}
.switch-btn {
  font-size: 24rpx;
  color: #3b7cff;
  border: 1rpx solid #3b7cff;
  border-radius: 24rpx;
  padding: 4rpx 18rpx;
  margin-left: 20rpx;
}
.user-desc {
  margin-top: 10rpx;
  color: #888;
  font-size: 24rpx;
}
.user-level {
  margin-right: 20rpx;
}
.section {
  background: #fff;
  border-radius: 16rpx;
  margin: 30rpx 30rpx 0 30rpx;
  padding: 30rpx 24rpx;
}
.section-title {
  font-size: 28rpx;
  font-weight: bold;
  color: #222;
}
.attendance-list {
  display: flex;
  justify-content: space-between;
}
.attendance-item {
  flex: 1;
  text-align: center;
}
.attendance-value {
  font-size: 36rpx;
  font-weight: bold;
  color: #222;
}
.attendance-label {
  font-size: 22rpx;
  color: #888;
  margin-top: 8rpx;
}
.work-stat-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20rpx;
}
.work-stat-item {
  flex: 1;
  text-align: center;
}
.work-stat-value {
  font-size: 42rpx;
  font-weight: bold;
  margin-bottom: 6rpx;
}
.work-stat-label {
  font-size: 22rpx;
  color: #888;
  margin-top: 8rpx;
  text-align: center;
  margin: 0 auto;
  width: 100%;
  /* background-color: red; */
  justify-content: center;

}
.chart-placeholder {
  width: 100%;
  height: 360rpx;
  // background: #f2f4f8;
  border-radius: 12rpx;
  margin-top: 100rpx;
  margin-bottom: 10rpx;
}
.daily-list {
  padding-bottom: 30rpx;
}
.date-range {
  font-size: 22rpx;
  color: #888;
  margin-bottom: 10rpx;
}
.daily-table {
  width: 100%;
  border-radius: 12rpx;
  overflow: hidden;
}
.daily-row {
  display: flex;
  border-bottom: 1rpx solid #f0f0f0;
  background: #fff;
}
.daily-header {
  background: #f5f7fa;
  font-weight: bold;
}
.daily-cell {
  flex: 1;
  text-align: center;
  font-size: 24rpx;
  padding: 18rpx 0;
  color: #222;
}
</style>
